<template>
	<view class="content mainpadding">
		<!-- 商家名稱 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家名稱<text style="color: #ff0000;">*</text></view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入商家名稱" placeholder-style="color: #999999;"
				v-model="name">
		</view>
		<!-- 商家分类 -->
		<!-- <view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家分类</view>
			<view class="flexleft" @click="show=true">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇分类"
					placeholder-style="color: #999999;" disabled v-model="sort">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view> -->
		<!-- 發佈票券 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">發佈票券</view>
			<view class="flexleft">
				<u-radio-group v-model="type" placement="row" circle>
					<u-radio activeColor="#FFB800" :customStyle="{marginRight: '50rpx'}" labelColor="#999999" label="是"
						:name="0"></u-radio>
					<u-radio activeColor="#FFB800" labelColor="#999999" label="否" :name="1"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<!-- 統一編號 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">統一編號</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入統一編號" placeholder-style="color: #999999;"
				v-model="serialnum">
		</view>
		
		<uni-data-picker @change="bindPickerChanget" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
			v-model="area">
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">營登區域</view>
			<view class="flexleft">
				
					<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇所在地址"
						placeholder-style="color: #999999;" disabled v-if="!area1.length" v-model="addre1">
					<!-- <text class="inputs1" v-if="!area.length" style="color: #999999;">選擇省、市、县</text> -->
					<text v-else>{{ area1[0] }}/{{ area1[1] }}/{{ area1[2] }}</text>
				<u-icon name="arrow-right" color="#333" size="16"></u-icon>
			</view>
		</view>
		</uni-data-picker>
		<!-- 營登地址 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">營登地址</view>
			<view class="flexleft">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請輸入營登地址"
					placeholder-style="color: #999999;" v-model="address_yd">
				<!-- <view class="right_icon"></view> -->
			</view>
		</view>
		<!-- 商家电话 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">商家行動<text style="color: #ff0000;">*</text></view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入商家行動" placeholder-style="color: #999999;"
				v-model="shopmbl">
		</view>
		<!-- 默认密码 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">設置密碼<text style="color: #ff0000;">*</text></view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入密碼" placeholder-style="color: #999999;"
				v-model="password">
		</view>
		<!-- <view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="flexleft">
				<view class="color_ling text_a white_nowrap margin_right">驗證碼</view>
				<input type="text" v-model="code" maxlength="12" class="ipt" placeholder-style="color:#999"
					placeholder="請輸入驗證碼" />
			</view>
			<view class="get-code flexright margin_right" style="min-width: 200rpx;" v-if="codeTime == 60" @click="getCode">獲取驗證碼</view>
			<view class="get-code flexright margin_right"  style="min-width: 200rpx;"  v-else>{{ codeTime }}s後重新發送</view>
		</view>
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">绑定帳號</view>
			<input class="text_a textright flex1" type="text" placeholder="請输入帳號" placeholder-style="color: #999999;"
				v-model="usemobel">
		</view>
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">帳號密碼</view>
			<input class="text_a textright flex1" type="text" placeholder="請输入帳號密碼" placeholder-style="color: #999999;"
				v-model="password">
		</view> -->
		<!-- 所在地址 -->
		<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
			v-model="area">
			<view class="flexbetween mainpadding ffffff border margin_bottom3">
				<view class="color_ling text_a white_nowrap margin_right3">營業區域<text style="color: #ff0000;">*</text></view>
				<view class="flexleft">

					<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇營業區域"
						placeholder-style="color: #999999;" disabled v-if="!area.length" v-model="addre">
					<text v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
		</uni-data-picker>
		<!-- 详細地址 -->
		<view class="flexbetween mainpadding ffffff border margin_bottom3">
			<view class="color_ling text_a white_nowrap margin_right3">營業地址<text style="color: #ff0000;">*</text></view>
			<view class="flexleft">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請輸入營業地址"
					placeholder-style="color: #999999;" v-model="address">
				<view class="right_icon"></view>
			</view>
		</view>
		<!-- 上传店鋪LOGO -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">上傳店鋪LOGO</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in logoimage_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deleteimg" @click="deleimage(index,logoimage,logoimage_arr)"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(logoimage,logoimage_arr,1)"
					v-if="logoimage_arr.length<1">
					<view class="item_image radius">
						<image src="@/static/image/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 上传店鋪顶图 -->
		<view class="mainpadding ffffff border margin_bottom3">
			<view class="color_san text_a white_nowrap margin_right3">上傳店鋪頂圖</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in topimages_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deleteimg" @click="deleimage(index,topimages,topimages_arr)"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(topimages,topimages_arr,3)"
					v-if="topimages_arr.length<3">
					<view class="item_image radius">
						<image src="@/static/image/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 上传室内图 -->
		<view class="mainpadding ffffff border" style="margin-bottom: 150rpx;">
			<view class="color_san text_a white_nowrap margin_right3">上傳室內圖</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in inimages_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deleteimg" @click="deleimage(index,inimages,inimages_arr)"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(inimages,inimages_arr,4)"
					v-if="inimages_arr.length<4">
					<view class="item_image radius">
						<image src="@/static/image/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submitbtn" @click="submit">
				提交稽核
			</view>
		</view>
		<u-picker cancelText="取消" confirmText="確認"  :show="show" :columns="columns" keyName="name" confirmColor="#FFB800" @cancel="show=false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				name: "", //商家名称
				sort: "", //商家分类
				type: 0, //类型:0=是,1=否
				serialnum: "", //統一编号
				shopmbl: "", //商家电话
				items: citys.data, //省市區
				addre_yd:"",
				address_yd:"",
				area1: [], //選擇的省市區
				area: [], //選擇的省市區
				addre: "", //所在地址
				address: "", //详細地址
				logoimage: [], //店鋪LOGO
				logoimage_arr: [], //展示的店鋪LOGO
				topimages: [], //店鋪顶图
				topimages_arr: [], //展示的店鋪顶图
				inimages: [], //室内图
				inimages_arr: [], //展示的室内图
				images: [],
				pageShow: false,
				show: false,
				columns: [],
				password: '',
				usemobel: '',
				code:"",
				codeTime: 60, //倒計时時間
				captcha: "", //验证碼
				isClick:true,
				codesure:"",

			}
		},
		onLoad() {
			this.getCateList()
		},
		methods: {
			uploadVideo(upImgs, upImgs_arr, value){
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相機', '相簿'],
					success: function(res) {
						// 選擇相機走0
						if (res.tapIndex == 0) {
							httpRequest.chooseVideo(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									this.uploadImageService(res[i], upImgs, upImgs_arr)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							httpRequest.chooseVideo(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									this.uploadImageService(res[i], upImgs, upImgs_arr)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_arr){
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					console.log(res)
					let image_item = res.fullurl;
					upImgs_arr.push(image_item);
					upImg.push(res.url)
				}).catch(err => {});
			},
			// 获取验证碼
			getCode() {
				if (this.isClick) {
					if(!this.shopmbl){
						this.http.toast("請輸入行動電話")
						return false
					}
					this.isClick = false;
					let data = {
						mobile: this.shopmbl,
						event:"fendjoincer"
					};
					this.http.request("/api/sms/fs", 'POST', data).then((res) => {
						if (res.code == 1) {
							this.downTime();
							uni.showToast({
								title: "發送成功",
								icon: "none",
							});
							this.codesure = res.data
						} else {
							this.isClick = true;
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				}
			},
			// 发送验证碼倒計时
			downTime() {
				if (this.codeTime == 0) {
					this.codeTime = 60;
					this.isClick = true;
					return;
				} else {
					this.codeTime--;
					this.isClick = false;
					setTimeout(() => {
						this.downTime();
					}, 1000);
				}
			},
			async getCateList() { //获取商家分类
				let res = await this.http.request('/api/index/getShopsort', 'GET', {

				})
				if (res.code == 1) {
					this.columns.push(res.data)
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			confirm(e) { //確認分类
				console.log(e)
				this.sort = e.value[0].name
				this.show = false
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addre = `${this.area[0]}/${this.area[1]}/${this.area[2]}`
				// this.address.province = area[0].value;
				// this.address.city = area[1].value;
				// this.address.county = area[2].value;
			},
			bindPickerChanget(val) {
				let area = val.detail.value
				this.area1 = [area[0].text, area[1].text, area[2].text];
				this.addre_yd = `${this.area1[0]}/${this.area1[1]}/${this.area1[2]}`
				// this.address.province = area[0].value;
				// this.address.city = area[1].value;
				// this.address.county = area[2].value;
			},
			deleimage(i, upimg, arr) { //刪除图片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			},
			async submit() {
				let _this = this
				if (!this.name) {
					this.http.toast("請輸入商家名稱！")
					return false
				}
				// if (this.serialnum) {
				// 	if (!this.addre_yd) {
				// 		this.http.toast("請選擇營登區域！")
				// 		return false
				// 	}
				// 	if (!this.address_yd) {
				// 		this.http.toast("請输入營登地址！")
				// 		return false
				// 	}
				// }
				// if (!this.sort) {
				// 	this.http.toast("請選擇商家分类！")
				// 	return false
				// }
				// if (!this.serialnum) {
				// 	this.http.toast("請输入統一编号！")
				// 	return false
				// }
				if (!this.shopmbl) {
					this.http.toast("請輸入商家行動！")
					return false
				}
				if (!this.password) {
					this.http.toast("請输入密碼！")
					return false
				}
				// if (!this.usemobel) {
				// 	this.http.toast("請输入帳號！")
				// 	return false
				// }
				// if (!this.code) {
				// 	this.http.toast("請輸入驗證碼！")
				// 	return false
				// }
				if (!this.addre) {
					this.http.toast("請選擇營業區域！")
					return false
				}
				if (!this.address) {
					this.http.toast("請輸入營業地址！")
					return false
				}
				// if (!this.logoimage.length) {
				// 	this.http.toast("請上传店鋪LOGO！")
				// 	return false
				// }
				// if (!this.topimages.length) {
				// 	this.http.toast("請上传店鋪顶图！")
				// 	return false
				// }
				// if (!this.inimages.length) {
				// 	this.http.toast("請上传室内图！")
				// 	return false
				// }
				let res = await this.http.request('/api/shop/addShop', 'POST', {
					name: _this.name, //商家名称
					sort: _this.sort, //商家分类
					serialnum: _this.serialnum, //統一编号
					shopmbl: _this.shopmbl, //商家电话
					usemobel: _this.usemobel, //帳號
					// code:this.code,
					password: _this.password, //密碼
					addre: _this.addre, //所在地址
					address: _this.address, //详細地址
					addre_yd: _this.addre_yd, //所在地址
					address_yd: _this.address_yd, //營業地址
					logoimage: _this.logoimage.join(), //店鋪LOGO
					topimages: _this.topimages.join(), //店鋪顶图
					inimages: _this.inimages.join(), //室内图
				})
				if (res.code == 1) {
					this.http.toast("提交成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.get-code {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 50rpx;
		text-decoration: underline;
		color: #FFB800;
	}
</style>